<template>
<div>
<button @click="$router.back()">返回首页</button>
<div id="main" style="width:100%;height:500px" :auto-resize="true">13</div>
</div>
</template>
<script>
  import echarts from 'echarts'
    export default{
        mounted() {
           this.creat() 
        },
        methods:{
            creat(){
                 //1:创建echarts对象
    var main = document.getElementById("main");
    var myChart = echarts.init(main)
    //2:创建配置项
    var option = {
      title:{
        text:"城市旅游热点",
        show:true,
        subtext:"旅游热点统计图(单位：百万)",
        left:"left", //center left right
        borderColor:"red",
        borderWidth:1
      },
      toolbox:{
         show:true,
         feature:{
           saveAsImage:{show:true}, //保存图片
           dataView:{show:true},    //数据视图
           restore:{show:true},     //恢复
           dataZoom:{show:true},    //显示区域
        
         }},
      legend:{data:["旅游热点"]},
      xAxis:{data:["北京","苏州","海南","贵阳","哈尔滨"]},
      yAxis:{},
      series:[//数据源
      {
        name:"客流量",type:"bar",data:[70,11,11,22,88]
      }
      ]
    }
     query: {
            maxWidth: 500               // 当容器宽度小于 500 时。
        }
    //3:将配置项添加echarts对象
    myChart.setOption(option)
            }
      }

    }
</script>
<style scoped>
button{
    background:red;
    width:70px;
    height:30px;
    border-radius:8%;
}
    
</style>
